<template>
    <div style="">
        <div class="container" v-show="!showEdit">
            <div class="handle-box">
                <el-input v-model="uhomeUserId" type="number" placeholder="用户id" class="handle-input mr10"></el-input>
                <el-input v-model="uhomeUserNickName" placeholder="用户账号" class="handle-input mr10"></el-input>
                <el-date-picker
                    v-model="timeRange"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="创建时间"
                    end-placeholder="创建时间"
                    value-format="yyyy-MM-dd"
                    style="width: 230px; margin-right: 10px"
                >
                </el-date-picker>
                <el-select v-model="replyStatus" placeholder="状态" class="handle-select mr10">
                    <el-option key="-1" label="全部" value="-1"></el-option>
                    <el-option key="0" label="未解决" value="0"></el-option>
                    <el-option key="1" label="已解决" value="1"></el-option>
                </el-select>
                <el-input v-model="adminUserName" placeholder="回复账号" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column type="index" :index="methodIndex" label="序号" width="55" align="center"></el-table-column>
                <el-table-column prop="uhomeUserId" label="用户id"></el-table-column>
                <el-table-column prop="uhomeUserNickName" label="用户账号"></el-table-column>
                <el-table-column label="问题描述">
                    <template slot-scope="scope">
                        <span class="line2">{{ scope.row.content }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="concatInfo" label="联系方式"></el-table-column>

                <el-table-column label="创建时间" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createTime | dateFilter }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="80" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.replyStatus == 1 ? '已解决' : '未解决' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="adminUserName" label="回复账号"></el-table-column>
                <el-table-column label="回复时间" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.replyTime | dateFilter }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="80" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next,jumper"
                    :current-page="pageNo"
                    :page-size="pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <edit-feedback v-if="showEdit" :isReply="isReply" :id="id" @back="back" @save="save"></edit-feedback>
    </div>
</template>

<script>
import { fetchData } from '../../api/index';
import editFeedback from '../common/editFeedback';
import EditFeedback from '../common/editFeedback.vue';
export default {
    data() {
        return {
            tableData: [],
            multipleSelection: [],
            delList: [],

            uhomeUserId: null,
            uhomeUserNickName: null,
            createTime: null,
            replyStatus: null,
            adminUserName: null,
            pageNo: 1,
            pageSize: 10,
            id: 0,
            pageTotal: 0,
            showEdit: false,
            isReply: false,
            timeRange:null
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
            this.$api
                .post({
                    url: '/feedback/pageQuery',
                    data: {
                        pageNo: this.pageNo,
                        pageSize: this.pageSize,
                        param: {
                            uhomeUserId: this.uhomeUserId,
                            uhomeUserNickName: this.uhomeUserNickName,
                            adminUserName: this.adminUserName,
                            createTimeStart: this.timeRange ? this.timeRange[0] + ' 00:00:00' : null,
                            createTimeEnd: this.timeRange ? this.timeRange[1] + ' 00:00:00' : null,
                            replyStatus: this.replyStatus == -1 ? null : this.replyStatus
                        }
                    }
                })
                .then(res => {
                    if (res.code && res.code == '200') {
                        this.tableData = res.data.result || [];
                        this.pageTotal = res.data.total;
                    }
                });
        },
        // 触发搜索按钮
        handleSearch() {
            this.pageNo = 1;
            this.getData();
        },
        // 编辑操作
        handleEdit(index, row) {
            this.showEdit = true;
            this.id = row.id;
            this.isReply = row.replyStatus == 1;
        },
        back() {
            this.id = 0;
            this.showEdit = false;
        },
        // 保存
        save() {
            this.id = 0;
            this.showEdit = false;
            this.getData();
        },
        // 分页导航
        handlePageChange(val) {
            this.pageNo = val;
            this.getData();
        },
        methodIndex(index) {
            return index + 1;
        }
    },
    components: {
        editFeedback
    }
};
</script>
EditFeedback

<style scoped lang="scss">
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 100px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.line2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
</style>
